import { Select } from 'antd';
import { getChannelsAPI } from 'api/article';
import React, { useEffect, useState } from 'react';
const { Option } = Select;

/* 
    自定义表单控件-改为受控组件
    把value和onChange，托管给Form组件，Form源码内部会自动接管并付给自定义的组件
    步骤
    1、形参上定义value和onChange
    2、value和onChange传给Select即可
    3、透传props 原封不动将全部参数扔给Select组件
    */
//  export default function Channel(value,onChange) {
export default function Channel(props) {
  const [channels, setChannels] = useState([]);
  // useEffect 请求数据
  useEffect(() => {
    getChannels();
  }, []);
  // 获取所有频道列表函数
  const getChannels = async () => {
    const res = await getChannelsAPI();
    setChannels(res.data.channels);
  };
  return (
    // <Select style={{ width: 120 }} value={value} onChange={onChange}>
    // style样式 可以通过 props透传
    <Select {...props}>
      {channels.map((item) => (
        <Option value={item.id} key={item.id}>
          {item.name}
        </Option>
      ))}
    </Select>
  );
}
